<template>
    <div class='word-box'>
      <div id="word" ref="word-box" class='word-cloud'></div>
      <div class="moke"></div>
    </div>
  </template>
  
  <script>
  import * as echarts from "echarts";
  // import "echarts-wordcloud/dist/echarts-wordcloud.js";
  // import "echarts-wordcloud/dist/echarts-wordcloud.min.js";
  import "echarts-wordcloud"
  export default {
    name: "wordCloud",
    props: {
      word: {
        type: Array,
        default: () => {
          return [
            
          ]
        }
      },
    },
    data () {
      return {};
    },
    mounted () {
      // 测试初始化 （可删除）
      this.setWord()
    },
    watch: {
      word: {
        handler (val) {
          this.setWord();
        },
        deep: true,
      },
    },
    methods: {
      setWord () {
        let wordList = this.word.map((res) => {
          return { value: res.freq, name: res.name };
        });
        console.log(wordList)
        let a = this.$refs["word-box"];
        let myChart2 = echarts.init(a);
        myChart2.setOption({
          series: [
            {
              type: "wordCloud",
              //用来调整词之间的距离
              gridSize: 10,
              //用来调整字的大小范围
              sizeRange: [12, 60],
              //用来调整词的旋转方向，，[0,0]--代表着没有角度，也就是词为水平方向，需要设置角度参考注释内容
              rotationRange: [-90, 90],
              //随机生成字体颜色
              textStyle: {
                fontFamily: "sans-serif",
                fontWeight: "bold",
                color: function () {
                  // Random color
                  return (
                    "rgb(" +
                    [
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                      Math.round(Math.random() * 160),
                    ].join(",") +
                    ")"
                  );
                },
              },
              emphasis: {
                focus: "self",
  
                textStyle: {
                  shadowBlur: 10,
                  shadowColor: "#333",
                },
              },
              //位置相关设置
              left: "center",
              top: "center",
              right: null,
              bottom: null,
              width: "100%",
              height: "100%",
              //数据
              data: wordList,
            },
          ],
        });
        //点击事件
        myChart2.on("click", function (params) {
        //   alert(params.name);
        });
      },
    },
  };
  </script>
  <style lang='scss' scoped>
  .word-box {
    display: flex;
    justify-content: center;
    width: 100%;
    position: relative;
  }
  
  .word-cloud {
    height:260px;
    width: 1100px;
  }
  .moke{
    width: 100%;
    height: 100%;
    background-color: aqua;
    position: absolute;
    top: 0;
    opacity: 0;
  }
  </style>
  